<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--	<meta name="viewport" content="width=device-width, initial-scale=1">-->
    <title>文件上传</title>
	<link rel="icon" type="image/x-icon" href="http://www.xiaoxingbobo.top/img/favicon.ico">
    <link href="css/font.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="./css/xxbb.main.css"/>
    <link rel="stylesheet" href="css/style-search.css" media="screen" type="text/css"/>
	<link rel="stylesheet" href="./css/index.css">
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
	<style>
		.demo {
			padding: 2em 0;
			background-color: #212121;
		}

		.progress {
			height: 25px;
			background: #262626;
			padding: 5px;
			overflow: visible;
			border-radius: 20px;
			border-top: 1px solid #000;
			border-bottom: 1px solid #7992a8;
			margin-top: 50px;
		}

		.progress .progress-bar {
			border-radius: 20px;
			position: relative;
			animation: animate-positive 2s;
		}

		.progress .progress-value {
			display: block;
			padding: 3px 7px;
			font-size: 13px;
			color: #fff;
			border-radius: 4px;
			background: #191919;
			border: 1px solid #000;
			position: absolute;
			top: -40px;
			right: -10px;
		}

		.progress .progress-value:after {
			content: "";
			border-top: 10px solid #191919;
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			position: absolute;
			bottom: -6px;
			left: 26%;
		}

		.progress-bar.active {
			animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
		}

		@-webkit-keyframes animate-positive {
			0% {
				width: 0;
			}
		}

		@keyframes animate-positive {
			0% {
				width: 0;
			}
		}
	</style>
</head>

<body>

<canvas id="canvas" width="100%" height="999999"> 您的浏览器不支持canvas标签，请您更换浏览器</canvas>
<script src="js/word.js"></script>
<p id="offscreen-text" class="offscreen-text"></p>
<p id="text" class="text"></p>
<!--<svg id="svg" > </svg>-->
<div id="d" class="webdesigntuts-workshop">

			<span>
				<div class="progress d-none w-400">
					<div id="progressBar" class="progress-bar progress-bar-info progress-bar-striped active"
                         style="width: 0%;background-color: #f63a0f">
						<div id="progressValue" class="progress-value">0%</div>
					</div>
				</div>
				<div class="file">
					<input class="input w-300" id="input" type="search" placeholder="文件名称" autofocus="autofocus"/>
					<input type="file" class="d-none"/>
					<button id="buttonSelectFile" class="hover_cursor-pointer">选择文件</button>
				</div>

				<div class="messageShow d-none">
					<input type="text" class="pe-none w-200" value="上传完成"/>
					<button id="btnOk">确定</button>
				</div>
			</span>
</div>


<script src='js/index.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
</body>
</html>
